@import '../_config.scss';

.home-carousel-menu {
  height: 500px;
  width: 100%;
  position: relative;
  margin-bottom: 30px;

  .top-menu {
    height: 50px;
    background-color: $color-new-bg;

    ul {
      display: flex;
      flex-flow: row nowrap;
    }

    > div {
      height: 100%;

      ul {
        height: 100%;
        display: flex;
        align-items: center;

        li {
          font-size: 15px;

          a {
            color: #222222;
            padding-left: 15px;
            padding-right: 15px;
            &:hover{
              color: $color-private;
            }
          }
        }
      }
    }
  }
  .ncc-conter{
    position: relative;
    .ncc-form{
      width: 200px;
      height: 80%;
      padding:10px;
      background: rgba(255,255,255,0.6);
      position: absolute;
      top:10%;
      right: 30px;
      button{
        border:none;
      }
      .form-control{
        border-radius: 0px;
        margin-bottom:15px;
        border:onne;
        height: 26px;
      }
      .ncc-form-btn{
        height: 26px;
        background: #fff;
        width: 45%;
      }
      .ncc-form-btn-two{
        margin-left: 10%;
      }
      .ncc-form-btn-yuyue{
        height: 30px;
        margin-top:15px;
        background: #37ac73;
        width: 100%;
        color:#fff;
      }
      > div > p{
        text-align: center;
        margin-top:30px;
        font-size:14px;

      }
      .ncc-span{
        display: flex;
        i{
          display: inline-block;
          font-size:1px;
          height: 6px;
          width: 6px;
          border-radius:6px;
          background: #37ac73;
        }
        p{
          margin:0px 0px 0px 10px;
        }
      }
    }
  }
  .bg-carousel{
    /* position: relative; */
/*     position: relative;
height: 450px; */
    /*     img{
      width: 100%;
      height: 450px;
    } */

  }

  .menus{
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: 100%;
    background-color: rgba(55, 52, 55, 0.8);

    .parent-menu{
      width: 100%;
      >li{
        padding: 14.5px 30px;
        font-size: 15px;
        color: $color-default;

        &:first-child{
          background-color: $color-private;
        }

        &:not(:first-child){
          cursor: pointer;

          i{
            font-size: 16px;
          }

          .kid-menu{
            width: 300%;
            background-color: rgba(55, 52, 55, 0.8);
            height: 90%;
            position: absolute;
            left: 100%;
            top: 10%;
            display: none;

            ul{
              display: flex;
              flex-flow: row wrap;
              li{
                padding: 17.5px 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: relative;

                a{
                  color: $color-default;
                }

                &:not(:first-child)::before{
                  position: absolute;
                  top: 21px;
                  left: 0;
                  content: '';
                  height: 15px;
                  border-left: 1px solid $color-border;
                }

                &:hover{
                  a{
                    color: $color-private;
                  }
                }
              }
            }
          }

          &:hover{
            color: $color-private;
            .kid-menu{
              display: inherit;
            }
          }
        }
      }
    }
  }
}
